<template>
  <div class="rank-list">
    <a-card title="用户排行榜">
      <a-radio-group v-model="sortOrder" @change="loadRankList">
        <a-radio value="score">积分</a-radio>
        <a-radio value="acCount">AC数</a-radio>
        <a-radio value="acRate">AC率</a-radio>
      </a-radio-group>
      <a-table
        :columns="columns"
        :data="rankList"
        :pagination="pagination"
        :loading="loading"
        row-key="userId"
      />
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { UserControllerService } from "../../../generated";

const loading = ref(false);
const rankList = ref([]);
const sortOrder = ref("score");
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: true,
});

const columns = [
  { title: "排名", dataIndex: "rank", key: "rank", width: 80 },
  { title: "用户名", dataIndex: "username", key: "username", width: 120 },
  { title: "积分", dataIndex: "score", key: "score", width: 100 },
  { title: "AC数", dataIndex: "acCount", key: "acCount", width: 100 },
  { title: "提交数", dataIndex: "submitCount", key: "submitCount", width: 100 },
  {
    title: "AC率",
    dataIndex: "acRate",
    key: "acRate",
    width: 100,
    render: ({ record }) => `${record.acRate}%`,
  },
];

const loadRankList = async () => {
  loading.value = true;
  try {
    const res = await UserControllerService.getRankList({
      current: pagination.current,
      pageSize: pagination.pageSize,
      sortOrder: sortOrder.value,
    });
    if (res.code === 0) {
      rankList.value = res.data.records.map((item, idx) => ({
        ...item,
        rank: (pagination.current - 1) * pagination.pageSize + idx + 1,
        acRate: item.submitCount
          ? ((item.acCount / item.submitCount) * 100).toFixed(2)
          : "0.00",
      }));
      pagination.total = res.data.total;
    } else {
      Message.error(res.message || "获取排行榜失败");
    }
  } finally {
    loading.value = false;
  }
};

onMounted(loadRankList);
</script>
